<template>
    <div class="tootip-content">
        <div>推广活动是指：淘宝/天猫的淘口令、淘暗号、优惠券等活动。</div>
        <div>以下是统计指标说明：</div>
        <table class="tootip-table">
            <thead>
                <tr>
                    <th class="pointer text-left">指标名</th>
                    <th class="remark text-left">备注字段</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in tableData" :key="item.id">
                    <td class="pointer">{{ item.pointer }}</td>
                    <td class="remark">{{ item.remark }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script setup>
import { reactive } from 'vue';
const tableData = reactive([
    {
        id: 1,
        pointer: '引导进店浏览量',
        remark: '通过该推广链接引导进店的浏览量。'
    },
    {
        id: 2,
        pointer: '下单订单数',
        remark: '通过该推广链接引导的用户下单的订单数。'
    },
    {
        id: 3,
        pointer: '下单总金额',
        remark: '通过该推广链接引导的用户下单的订单总金额。'
    },
    {
        id: 4,
        pointer: '支付订单数',
        remark: '通过该推广链接引导的用户下单并支付的订单总数。（包含支付后退款的订单）'
    },
    {
        id: 5,
        pointer: '支付总金额',
        remark: '通过该推广链接引导的用户下单并支付的订单总金额。（包含支付后退款的订单）'
    }
]);
</script>

<style lang="scss" scoped>
.tootip-content {
    width: 680px;
    padding-bottom: 5px;
}

:deep(.el-table) {
    position: static;
}

.tootip-table {
    width: 680px;

    .pointer {
        width: 120px;
    }

    tbody {
        max-width: 680px;
    }

    thead,
    th {
        border: 1px solid #fbfbfb;
        padding: 11px 14px;
    }

    table,
    td {
        border: 1px solid #fbfbfb;
        padding: 11px 14px;
        height: 40px;
        box-sizing: border-box;
    }
}

.text-left {
    text-align: left;
}
</style>
